<template>
  <f7-page>
    <f7-navbar title="车辆行情">
      <f7-nav-right>
        <f7-link href="/pass/passAdd/" icon-f7="add" color="white"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar>
      <tab isActive2="true" />
    </f7-toolbar>

    <f7-block>
      司机将在
      <span>【司机中心】</span>接单进行运输！
    </f7-block>
    <f7-swiper>
      <f7-swiper-slide>
        <h6>e-WCA.com</h6>
        <h1>运输中心·货源</h1>
        <h6>物流天下</h6>
      </f7-swiper-slide>
    </f7-swiper>
    <div class="">
      <vue-scroll :ops="ops" style="overflow: hidden; height: auto;">
        <ul class="row-scroll">
          <li v-for="item,index in verifyCompany" :class="{'active':item.switch}" @click="verifyCompanyClick(index,item)">
            <span class="img-circle img-size1" v-if="item._id!='sijiquan' && item._id!='shangyezhineng'">
              <i class="h6">{{item.count}}辆</i>
            </span>
            <span class="img-circle img-size1" v-if="item._id=='sijiquan' || item._id=='shangyezhineng'">
              <f7-icon f7="circle" class="lightbulb"></f7-icon>
            </span>
            <h6>{{item.name}}</h6>
          </li>
        </ul>
      </vue-scroll>
    </div>

    <f7-block-title class="nav_title" hidden>
      <f7-icon f7="volume_fill" class="The_horn"></f7-icon>
      <b>1个货源方申请好友，添加查看货源行情</b>
      <f7-icon f7="right" color="gray"></f7-icon>
    </f7-block-title>

    <div class="">
      <vue-scroll :ops="ops" style="overflow: hidden; height: auto;">
        <ul class="row-scroll row_ul">
          <li v-for="item,index in statusType" @click="statusTypeClick(item,index)">
            <a :class="{'actived':item.switch}">{{item.chn}}{{item.num}}</a>
          </li>
        </ul>
      </vue-scroll>
    </div>

    <f7-block-title class="text-align-center" hidden>
      <span>按线路筛选</span>
      <span class="text-purple">| 筛选 <img src="../../assets/img/icon-filter.png" class="icon-filter"></span>
    </f7-block-title>

    <noData v-if="passGuideData.count==0"></noData>

    <template v-for="stp,index in statusType">
      <template v-for="item in passGuideData.lists" v-if="passGuideData.count>0">
        <f7-link v-if="passGuideParam.step===stp.eng" @click="$f7router.navigate(stp.link+item._id)">
          <passList :data="item" :tepType="passGuideParam.step"></passList>
        </f7-link>
      </template>
    </template>
  </f7-page>
</template>

<script>
import tab from '../../components/tab.vue'
import Vue from 'vue'
import vuescroll from 'vuescroll'
// 注意： 从4.6.6开始， 你需要引入 .css 文件了
import 'vuescroll/dist/vuescroll.css'
import F7Link from 'framework7-vue/src/components/link'
import common from '../../utils/common.js'
import passList from '../../components/passList.vue'
import noData from '../../components/noData.vue'
Vue.use(vuescroll)
export default {
  name: 'trade',
  data: function () {
    return {
      ops: {
        vuescroll: {
          snapping: {
            enable: false,
            width: 100,
            height: 100
          },
          mode: 'slide'
        },
        scrollPanel: {
          scrollingY: false // or scrollingX: false
        },
        rail: {
          background: '#01a99a',
          opacity: 0,
          /** Rail's size(Height/Width) , default -> 6px */
          size: '0'
        }
      },
      verifyCompany: [],
      statusType: [
        { eng: 'line_effective', chn: '查找车辆线路', switch: true, num: 0,link:'/pass/passDtl/'},
        { eng: 'demand_effective', chn: '已发布的指派', switch: false, num: 0,link:'/pass/passAppointDtl/' },
        { eng: 'order_effective', chn: '司机订单', switch: false, num: 0,link:'/pass/passIndent/' },
        { eng: 'order_complete', chn: '已完成', switch: false, num: 0,link:'/pass/passIndent/' }
      ],
      passGuideData: {
        lists: []
      },
      passGuideParam: {
        group_id: '',
        page: 1,
        step: 'line_effective'
      }
    }
  },
  components: {
    F7Link,
    tab: tab,
    passList: passList,
    noData: noData
  },
  methods: {
    // 获取公司列表
    async getVerifyCompany () {
      let param = {
        type: 'DRIVER'
      }
      let getVerifyCompanyRes = await this.AccountService.getCarGroup(param)
      this.verifyCompany = getVerifyCompanyRes.data.data
      this.verifyCompany.unshift({
        name: '司机圈',
        _id: 'sijiquan'
      })
      // this.verifyCompany.unshift({
      //   nick_name: '商业智能',
      //   _id: 'shangyezhineng'
      // })
      common.addAttrSwitch(this.verifyCompany)
      this.verifyCompany[0].switch = true
    },
    // 获取状态相关信息
    async passGuide (step) {
      let passGuideRes = await this.AccountService.driverGuide(this.passGuideParam)
      this.passGuideData = passGuideRes.data.data
      this.statusType.forEach((item) => {
        switch (item.eng) {
          case 'line_effective':
            item.num = this.passGuideData.line_effective
            break
          case 'demand_effective':
            item.num = this.passGuideData.demand_effective
            break
          case 'order_effective':
            item.num = this.passGuideData.order_effective
            break
          case 'order_complete':
            item.num = this.passGuideData.order_complete
            break
        }
      })
    },
    // 认证公司点击
    verifyCompanyClick (index, item) {
      common.addAttrSwitch(this.verifyCompany)
      item.switch = true
      this.$set(this.verifyCompany, index, item)
      if (item._id === 'sijiquan' || item._id === 'shangyezhineng') {
        this.passGuideParam.group_id = ''
      } else {
        this.passGuideParam.group_id = item._id
      }
      this.passGuide()
    },
    // 状态点击
    statusTypeClick (item, index) {
      common.addAttrSwitch(this.statusType)
      item.switch = true
      this.$set(this.statusType, index, item)
      this.passGuideParam.step = item.eng
      this.passGuide()
    }
  },
  mounted () {
    this.getVerifyCompany()
    this.passGuide()
  }
}
</script>

<style scoped>
.ios .Time {
  background: #f5f5f5 !important;
  color: #666 !important;
}

.ios .page {
  background: #f5f5f5;
}

.ios a {
  color: #333;
  display: inline-block;
  width: 100%;
}

.ios .block {
  margin: 0;
  color: #6d6d72;
  text-align: center;
  background: #fff;
  height: 44px;
  line-height: 44px;
  color: #333;
  font-size: 12px;
  font-weight: normal;
}

.swiper-container {
  position: relative;
  overflow: hidden;
  padding: 0;
  z-index: 1;
  margin: 0px 10px 3px 10px;
  background: url('../../assets/img/banner.png') no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.swiper-slide h6 {
  margin: 0px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  padding: 7px 0px 5px 0px;
}

.swiper-slide h1 {
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  margin: 0;
}

.row-scroll {
  overflow: hidden;
  min-width: 700px;
  padding: 10px 10px 3px 10px;
  overflow-x: hidden;
  margin: 0;
}

.row-scroll li {
  float: left;
  text-align: center;
  list-style: none;
  padding-right: 10px;
}

.row_ul li {
  margin-right: 20px;
}

.row-scroll li span {
  display: inline-block;
  background: #f4f4f4;
  border: 1px solid #ccc;
  margin-bottom: 12px;
  color: #999;
  line-height: 44px;
}

.row-scroll li a {
  background: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
  color: #999;
}

.row-scroll li .actived {
  color: #fff;
  background-image: linear-gradient(90deg, #94a8fb 0%, #6a82e8 100%);
}

.img-size1 {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
}

.img-circle {
  border-radius: 100%;
  background: #f0f0f0;
}

.img-circle img {
  border-radius: 100%;
}

.row-scroll span i.h6 {
  margin-top: 10px;
  display: inline-block;
  line-height: 15px;
  width: 25px;
  color: #999;
  font-size: 11px;
  font-style: normal;
}

.row-scroll h6 {
  width: 65px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 3px;
  font-weight: initial;
  margin: 0;
  color: #999;
}

.text-gray {
  color: #999 !important;
  display: inline !important;
}

.active span {
  border-color: #ff8645 !important;
  color: #ff8645 !important;
  background: #fff2e8 !important;
}

.active h6 {
  color: #ff8645 !important;
  font-size: 11px;
  font-weight: initial;
}

.lightbulb {
  font-size: 20px;
}

.nav_title {
  margin: 10px 10px 0px 10px !important;
  border-radius: 6px;
  padding: 8px 0;
  background: #ffffff;
  padding-left: 15px;
  text-align: left !important;
}

.ios .icon.The_horn {
  color: #9898e7;
  font-size: 20px;
  margin-right: 10px;
}

.nav_title b {
  color: #9898e7;
  font-size: 12px;
}

.ios .icon.color-gray {
  color: #8e8e93;
  font-size: 20px;
  float: right;
  margin-right: 10px;
}

.ios .block-title {
  color: #333;
  margin: 0;
  line-height: 20px;
  padding-top: 10px;
}

.text-purple {
  color: #a2a2f0;
  margin-left: 3px;
  font-size: 12px;
}

.icon-filter {
  width: 11px;
  height: 11px;
}

.col {
  margin-top: 70px;
}

.gap-100 {
  margin-top: 100px;
}

.clearfix {
  clear: both;
}

.text-grag {
  color: #999 !important;
  font-size: 14px;
}

<!-- 卡片css-- > .text-left {
  position: relative;
}

.line-icon {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 45px;
}

.status-bg {
  background: url('../../assets/img/route-bg.png') no-repeat top center;
  background-size: 95px 4px;
  margin-top: 6px;
  padding-top: 10px;
}

.text-orange {
  margin: 0;
  color: #ff6c00;
  font-weight: normal !important;
  font-size: 13px;
  text-align: center;
}

.pull-left {
  text-align: left;
  margin-left: 24px;
}

.pull-right {
  text-align: right;
}

.pull-left span {
  font-size: 12px;
  color: #666;
  display: block;
}

.pull-left b {
  font-size: 14px;
  color: #000;
  display: block;
}

.pull-right span {
  font-size: 12px;
  color: #666;
  display: block;
}

.pull-right b {
  font-size: 14px;
  color: #000;
  display: block;
}

.infor-face {
  max-width: 38px;
  max-height: 38px;
  width: 100%;
  height: 100%;
}

.text-center_article {
  position: absolute;
  font-size: 14px;
  color: #a2a2f0;
  padding-left: 50px;
  top: 10px;
}

.text-center_weight {
  font-size: 12px;
  position: absolute;
  padding-left: 50px;
  color: #999;
  top: 30px;
}

.label-v {
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
  vertical-align: middle;
  border-radius: 100%;
  background: #f0f0f0;
}

.text-right {
  text-align: center;
}

.text-right span {
  margin: 0 0 3px 0;
  font-size: 10px;
  color: #666;
  display: inherit;
}
.ios .navbar a.icon-only {
  width: 20px;
}
</style>
